﻿<%@ page language="java" import="com.newcrm.config.Const,com.newcrm.util.Util,com.newcrm.db.CompanyBusinessArchiveManager,com.newcrm.businessarchives.*,com.newcrm.bean.*,com.newcrm.db.CustomerCategoryManager,com.newcrm.db.CustomerFieldManager,java.net.URLEncoder,java.util.List,java.util.Map,java.util.ArrayList,java.util.Date" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  User user = (User) session.getAttribute("user");
  Map<Integer, CompanyInfo> companys = (Map<Integer, CompanyInfo>) application.getAttribute(Const.APPLICATION_COMPANYS);
  CompanyInfo companyInfo = companys.get(Integer.valueOf(user.companyId));
  List<User> users = companyInfo.users;
  List<Map<String, Object>> voipSeatsInfo = (List<Map<String, Object>>)request.getAttribute("seats");

  String voipName = (String) request.getAttribute("voip_name");
  String voipPwd = (String) request.getAttribute("voip_pwd");
  String voipServerIP = (String) request.getAttribute("voip_ip");
  int num = 1;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>呼叫中心后台管理</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="renderer" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/qikebao.ico" />
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/all.css?ver=<%=Const.VERSION%>">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/datepicker.css" />
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap-datetimepicker.min.css" />
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/magnific-popup.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/jplayer.blue.monday.min.css">
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/bootstrap.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery-ui.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.bootstrap-growl.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/moment.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/bootstrap-datepicker.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/daterangepicker.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.magnific-popup.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.cookie.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/popbox.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/pageNavi.js?ver=<%=Const.VERSION%>"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/common.js?ver=<%=Const.VERSION%>"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/voipsetting.js?ver=<%=Const.VERSION%>"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.jplayer.min.js?ver=<%=Const.VERSION%>"></script>
  <script>
    var userId = "<%=user.userId%>";
    var pageSize = 20;
    var boxServerIp = "<%=voipServerIP%>";
    var allUsers = new Array();
    <%if (users != null) {
        for (User u:users) { %>
    allUsers.push({id:"<%=u.userId%>",name:"<%=Util.UEncode(u.name)%>",photo:"<%=u.imgPath%>"});
    <%  }
      } %>

    var allSeats = new Array();
     <%if (voipSeatsInfo != null) {
        for (Map<String, Object> seat:voipSeatsInfo) {
          int groupId = (Integer) seat.get("GroupId");
          String seatUserId = (String) seat.get("UserId");
          if (!companyInfo.isGroupAdmin(user, groupId) && !user.userId.equals(seatUserId)) {
            continue;
          }
          %>
    allSeats.push({id:"<%=seat.get("UserName")%>",name:"<%=Util.UEncode((String)seat.get("Name"))%>"});
    <%  }
      } %>


    $(function() {
<%    if (user.isAdmin) {
        if (voipName != null && voipName.length() > 0) {
          if (("ucpaas.qikebao.com").equals(voipServerIP)) { %>
      $.getJSON("<%=request.getContextPath()%>/voip/account?appId=<%=Util.HTMLEncode(voipName)%>", function(item) {
        if (item) {
          $("#createTime").text(item.createTime);
          $("#balance").text(item.balance);
          $("#dialFee").text(item.fee);
        }
      });
    <%    } else { %>
      $.getJSON("<%=voipServerIP%>/seat/company?callback=?",
        {companyId2:$("#voip_user").val(),password:$("#voip_pwd").val()},
        function(item) {
          if (item && item.success == "1") {
            $("#createTime").text(item.createDate);
            $("#expiredDate").text(item.expiredDate);
            $("#licenceNum").text(item.licenceNum);
          } else {
            alert("呼叫中心账号设置的不正确，请确认后再输入");
          }
        }
      );
    <%
          }
        }
      } else {%>
        loadCallRecords(1);
        isLoadCallRecords = true;
        $(".tab-container").show();
    <%}%>
    });
  </script>
</head>
<body class="edit_identity">
  <jsp:include page="topNavi.jsp" flush="true"/>
  <div class="main-page">
    <div class="profile-header">
      <div><img src="<%=request.getContextPath()%>/images/phone.png"></div>
      <div class="detail">
        <h1>呼叫中心设置</h1>
        <p>企业使用呼叫中心提高工作效率，有效管理通话数据</p>
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="profile-info-tabs">
      <ul class="nav-tabs" id="tabs">
        <%if (user.isAdmin) {%>
        <li class="active"><a href="#navi-1">账号信息</a></li>
        <li><a href="#navi-2">通话记录</a></li>
        <li><a href="#navi-3">席位设置</a></li>
        <%} else {%>
        <li class="active"><a href="#navi-2">通话记录</a></li>
        <%}%>
      </ul>
      <div class="nav-detail">
        <%if (user.isAdmin) {%>
        <div id="navi-1" class="tab-container body setting-panel">
          <h1>呼叫中心后台管理</h1>
          <p class="tips">设置您的呼叫中心后台登录帐号信息，查询当前话费使用情况</p>
          <div class="item">开通时间：<span id="createTime"></span></div>
<% if (("ucpaas.qikebao.com").equals(voipServerIP)) {%>
          <div class="item">外呼余额：<span id="balance"></span>元</div>
          <div class="item">外呼资费：<span id="dialFee"></span>元/分钟</div>
<% } else { %>
          <div class="item">到期时间：<span id="expiredDate"></span></div>
          <div class="item">坐席上限：<span id="licenceNum"></span></div>
<% }%>
          <h2>呼叫中心管理员登录帐号</h2>
          <table class="setting">
            <tr><th width="100"><label for="voip_user">帐号</label></th><td><input autocomplete="off" class="normal" type="text" name="voip_user" id="voip_user" value="<%=Util.HTMLEncode(voipName)%>"></td></tr>
            <tr><th><label for="voip_pwd">密码</label></th><td><input autocomplete="off" type="password" class="passwordinput" name="voip_pwd" id="voip_pwd" value="<%=Util.HTMLEncode(voipPwd)%>"></td></tr>
            <tr><th><label for="voip_pwd">VOIP服务器IP</label></th><td><input autocomplete="off" type="text" class="normal" name="voip_ip" id="voip_ip" value="<%=Util.HTMLEncode(voipServerIP)%>"></td></tr>
            <tr><th></th><td><a id="setting_voip_link" class="button blue" href="#"><i class="fa fa-check"></i> 修 改 </a> <span class="tips" id="setting_voip_tips"></span></td></tr>
          </table>
        </div>
        <div id="navi-3" class="tab-container body setting-panel">
          <h1>席位管理</h1>
          <div class="toolbar">
             <a title="添加/修改席位" class="addSeat button grey small" href="#"><i class="fa fa-plus"></i> 添加/修改席位</a>
          </div>
          <table class="seatInfo" style="width:100%;">
            <thead><tr><th width="5%">编号</th><th width="10%">员工名</th><th width="10%">席位号</th><th width="15%">坐席密码</th><th width="30%">操作</th></thead>
              <tr>
              <% if (voipSeatsInfo != null) {
                  for(Map<String, Object> seat:voipSeatsInfo) {
  	          %>
  	          <td class="num"><%=num%></td>
              <td id='<%=(String)seat.get("UserId")%>' class="companyUser"><%=(String)seat.get("Name")%></td>
              <td class="seatNo"><%=(String)seat.get("UserName")%></td>
              <td class="seatPwd"><%=(String)seat.get("UserPwd")%></td>
              <td><a href="<%=(String)seat.get("UserId")%>" class="updateSeat"><i class="fa fa-pencil"></i> 修改<a> <a href="<%=(String)seat.get("UserId")%>" class="deleteSeat"><i class="fa fa-trash-o"></i> 删除<a></td>
            </tr>
            <%    num++;
                  }
  		         }
  	        %>
  	        <tr id="clone" style="display:none;">
  	          <td class="num"></td>
              <td class="companyUser"></td>
              <td class="seatNo"></td>
              <td class="seatPwd"></td>
              <td><a href="" class="updateSeat"><i class="fa fa-pencil"></i> 修改<a> <a href="" class="deleteSeat"><i class="fa fa-trash-o"></i> 删除<a></td>
            </tr>
          </table>
        </div>
        <%}%>
        <div id="navi-2" class="tab-container body setting-panel">
          <h1>通话记录</h1>
          <div class="callrecords_searchbar">
            <span>电话 <input type="text" id="callRecord_phone" class="searchinput"> </span>
            <span>员工 <select id="callRecord_userId">
                <% if (user.isAdmin || user.isGroupAdmin) {%>
                <option value="">全部</option>
                <% }%>
              <%if (voipSeatsInfo != null) {
                  for (Map<String, Object> seat:voipSeatsInfo) {
                    int groupId = (Integer) seat.get("GroupId");
                    String seatUserId = (String) seat.get("UserId");
                    if (!companyInfo.isGroupAdmin(user, groupId) && !user.userId.equals(seatUserId)) {
                      continue;
                    }
              %>
                  <option value="<%=Util.HTMLEncode((String)seat.get("UserName"))%>"><%=Util.HTMLEncode((String)seat.get("Name"))%></option>
              <%}}%>
              </select> </span>
            <span>通话时间段 <input type="text" id="callRecord_beginDate" value="" class="daterangepickerinput"> </span>
            <span>通话时长区间 <input type="text" id="callRecord_minTime" value="0" class="searchinput"> -- <input type="text" id="callRecord_maxTime" value="0" class="searchinput"> 秒</span>
            <a href="#" id="search_callrecords" class="button green"><i class="fa fa-search"></i> 检索</a>
          </div>
          <div id="callrecords_loading" class="loading">
            <div class="liner">
              <h3>通话记录加载中...</h3>
              <img alt="Dots-white" src="<%=request.getContextPath()%>/images/dots-white.gif" />
            </div>
          </div>
          <table class="callrecords" width="100%">
            <thead><tr><th width="40">编号</th><th width="50">类型</th><th width="120">客户电话</th><th nowrap>客户名</th><th width="80">员工</th><th width="160">呼叫时间</th><th width="100">通话时长</th><th width="180">录音</th></tr></thead>
            <tbody id="callrecordsList"></tbody>
          </table>
          <div class="pagination"><div class="page-bottom" id="pageNavi"></div></div>
          <div id="callrecords_none">没有找到相关的通话记录</div>
        </div>
      </div>
    </div>
  </div>

  <div id="callrecord-popup" class="white-popup mfp-hide">
    <div class="popup-title"><span class="title">通话录音</span> <span class="popup-close-button"><i class="fa fa-times"></i>&nbsp;</span></div>
    <div class="popup-content">
      <div id="jquery_jplayer_1" class="jp-jplayer"></div>
      <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
      	<div class="jp-type-single">
      		<div class="jp-gui jp-interface">
      			<div class="jp-controls">
      				<button class="jp-play" role="button" tabindex="0">play</button>
      				<button class="jp-stop" role="button" tabindex="0">stop</button>
      			</div>
      			<div class="jp-progress">
      				<div class="jp-seek-bar">
      					<div class="jp-play-bar"></div>
      				</div>
      			</div>
      			<div class="jp-volume-controls">
      				<button class="jp-mute" role="button" tabindex="0">mute</button>
      				<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
      				<div class="jp-volume-bar">
      					<div class="jp-volume-bar-value"></div>
      				</div>
      			</div>
      			<div class="jp-time-holder">
      				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
      				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
      				<div class="jp-toggles">
      					<button class="jp-repeat" role="button" tabindex="0">repeat</button>
      				</div>
      			</div>
      		</div>
      		<div class="jp-details">
      			<div class="jp-title" aria-label="title">&nbsp;</div>
      		</div>
      		<div class="jp-no-solution">
      			<span>您需要升级您的浏览器</span>
      			您的浏览器不支持录音播放，需要升级Flash组件 <a href="http://get.adobe.com/flashplayer/" target="_blank">升级Flash组件</a>.
      		</div>
      	</div>
      </div>
    </div>
  </div>

  <div id="seatModel" class="white-popup mfp-hide">
    <div class="popup-title"><span class="title">添加/修改坐席</span> <span class="popup-close-button"><i class="fa fa-times"></i>&nbsp;</span></div>
    <div class="popup-content">
      <label>选择席位对应的员工并输入坐席信息</label>
      <table style="margin:5px;">
        <tr>
          <th width="60"><label for="companyUser">员工</label></th>
          <td>
            <select id="companyUser" style="width:315px;padding:5px;">
              <% for (User u : users) { %>
                  <option value="<%=u.userId%>"><%=Util.HTMLEncode(u.name)%></option>
              <% }%>
            </select>
          </td>
        </tr>
        <tr>
          <th><label for="voipUser">帐号</label></th>
          <td><input class="normal" type="text" name="voipUser" id="voipUserPop" value="" ></td>
        </tr>
        <tr>
          <th><label for="voipPwd">密码</label></th>
          <td><input type="password" class="passwordinput" name="voipPwd" id="voipPwdPop" value="" ></td>
        </tr>
      </table>
    </div>
    <div class="buttonbar">
      <div class="right">
        <a id="addVoipSeat-link" class="button blue small" href="#"><i class="fa fa-check"></i> 确定</a>
        <a class="button grey small popup-close-button" href="#"><i class="fa fa-times"></i> 取消</a>
      </div>
      <div class="message"></div>
    </div>
  </div>

</body>
</html>